<template>
    <div class="row heig">
        <router-link custom v-slot="{ navigate }" :to="{ name: '比赛详情', params: { ID: activity.ID } }">

            <div @click="navigate" class="col clt" :style="{ paddingLeft: paddingLeft ? paddingLeft : '48px' }">
                <span :style="{ display: 'inline-block', maxWidth: '450px', overflow: 'hidden' }">{{ activity.name
                }}
                    <span :class="jianchatime(activity, datenow).type">{{ jianchatime(activity, datenow).text2 }}</span>

                </span>
            </div>
            <div @click="navigate" :style="{ width: '120px' }">
                <span>{{ activity.type === "public" ? "公开" : "非公开" }}</span>
            </div>
            <div @click="navigate" :style="{ width: '238px' }">
                <span>
                    {{ TimeYH1(activity.activitystarttime) }}
                    -
                    {{ TimeYH1(activity.activityendtime) }}
                </span>
            </div>
            <div @click="navigate" v-show="!isAdmin" :style="{ width: '120px' }">{{ activity.duration ? '个人计时' : '统一计时'
            }}</div>

            <div @click="navigate" :style="{ width: isAdmin ? '120px' : '176px', paddingRight: isAdmin ? '0px' : '48px' }">
                {{
                    activity.duration ? `${(activity.duration /
                        60).toFixed(1)}小时` : time(activity.activitystarttime, activity.activityendtime)
                }}
            </div>
        </router-link>
        <div v-if="isAdmin" :style="{ width: '320px' }">
            <a target="_blank" class="pdfa el-button--default el-button"
                :href="`/question.html?activityid=${activity.ID}&title=${activity.name}`">保存为PDF</a>
            <router-link v-slot="{ navigate }" custom :to="{
                name: '成员比赛记录',
                query: {
                    activityid: activity.ID
                }
            }">
                <el-button size="default" @click.stop="navigate">代码</el-button>
            </router-link>
            <router-link v-slot="{ navigate }" custom :to="{
                name: '创建比赛',
                params: { ID: teamid },
                query: {
                    ID: activity.ID
                }
            }">
                <el-button size="default" @click.stop="navigate">修改</el-button>
            </router-link>
            <el-button size="default" v-if="delactivity" @click.stop="() => delactivity ? delactivity(activity.ID) : ''">
                删除</el-button>
        </div>
    </div>
</template>

<script setup lang="ts">
import { computed } from "vue";
import { useStore } from "vuex";
import { Storekey } from "../../interface";
import Studycodemodel from "../../mysql_interface/studycodemodel";
import { jianchatime } from "@/util/jianchatime";
import { TimeYH1 } from "../../util/time";
const imgs: Record<string, string> = {
    即将开赛: 'https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/oj_1_1/jo_1_1_homepage/baiomingzhuangtai_weikaishi.svg',
    立即报名: 'https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/oj_1_1/jo_1_1_homepage/baiomingzhuangtai_baomingzhong.svg',
    进入比赛: 'https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/oj_1_1/jo_1_1_homepage/baiomingzhuangtai_bisaizhong.svg',
    赛事结束: 'https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/oj_1_1/jo_1_1_homepage/baiomingzhuangtai_bisaijieshu.svg'
}

const p = defineProps<{
    activity: Studycodemodel.Iactivity,
    isAdmin?: boolean,
    teamid?: number,
    delactivity?: (activityid?: number) => void,
    checkduplicate?: (activityid?: number) => void,
    paddingLeft?: string
}>()

const ischeckduplicate = computed(() => {
    return Date.now() > (new Date(p.activity.activityendtime ? p.activity.activityendtime : Date.now()).getTime() + 60 * 60 * 1000)
})
const store = useStore(Storekey)

const datenow = computed(() => {
    return store.state.time
})

function time(a: Date, b: Date) {
    const t = new Date(b).getTime() - new Date(a).getTime()
    let n: string | number = (t / 60 / 60 / 1000).toFixed(1)
    if (Number(n) === Math.floor(Number(n))) {
        n = Math.floor(Number(n))
    }
    return n + '小时'
}

</script>

<style scoped>
.ztcolor {
    color: var(--color-43);
    text-decoration: none;
    font-size: 14px;
}

.img {
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.heig {
    height: 48px;
    position: relative;
    line-height: 48px;
    border-bottom: 1px solid #c4c4c4;
    color: var(--color-43);
    text-decoration: none;
    font-size: 14px;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.heig:hover {
    background-color: #fafafa;
}

.fw-bold {
    color: var(--color-43);
    text-decoration: none;
}

.clt {
    align-items: center;
    position: relative;
    background-position-x: right;
    background-position-y: top;
    background-repeat: no-repeat;
    background-size: 120px 48px;
}

.icon {
    font-size: 24px;
    transform: translateY(3px);
}

.position-absolute {
    width: 400px;
    height: 40px;
    bottom: 10px;
    right: 0px;
    text-align: right;
}

.info {
    background-color: #434343;
    width: 44px;
    height: 24px;
    border-radius: 2px;
    color: #fff;
    display: inline-block;
    text-align: justify;
    font-size: 12px;
    font-weight: 400;
    line-height: 24px;
    text-align: center;
    margin-left: 12px;
}

.primary {
    background: linear-gradient(106.57deg, #00cc2d 0%, #07ca9b 100%);
    width: 44px;
    height: 24px;
    border-radius: 2px;
    color: #fff;
    display: inline-block;
    text-align: justify;
    font-size: 12px;
    font-weight: 400;
    line-height: 24px;
    text-align: center;
    margin-left: 12px;
    transform: translateY(-3px);
}

.danger {
    background: #8c8c8c;
    width: 44px;
    height: 24px;
    border-radius: 2px;
    color: #fff;
    display: inline-block;
    text-align: justify;
    font-size: 12px;
    font-weight: 400;
    line-height: 24px;
    text-align: center;
    margin-left: 12px;
    transform: translateY(-3px);
}

.success {
    background: var(--color-cheng);
    width: 44px;
    height: 24px;
    border-radius: 2px;
    color: #fff;
    display: inline-block;
    text-align: justify;
    font-size: 12px;
    font-weight: 400;
    line-height: 24px;
    text-align: center;
    margin-left: 12px;
    transform: translateY(-3px);
}


.pdfa a {
    color: var(--el-text-color-regular);
    text-decoration: none;
    display: inline-block;
    width: 100%;
    height: 100%;
}

.pdfa:hover a {
    color: #fff;
}
</style>